<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"  content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,">
    <!-- uc浏览器强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ浏览器强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC浏览器强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ浏览器强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC浏览器应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ浏览器应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <title>首页</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/all.css" rel="stylesheet">
    <style>
    </style>
</head>
<body class="bg-gray">
  <!-- public Header start-->
<header class="public-header">
    <div class="public-header-content clearfixed">
        <a href="javascript:history.back()" class="btn btn-back">
        </a>
        <h1>贷款计算器</h1>
    </div>
</header>
<!-- public Header end-->
<!--production-detial-->
<section class="production-detial" style="padding: 0"></section>


<!--tab-section-->
<section class="tab-section mt-10">
    <div class="tabcon">
        <ul id="tab" class="tab-list">
            <li class="tab-item">商业贷款</li>
            <li class="tab-item">提前还款</li>
            <li class="tab-item">房贷担保费</li>
            <li class="tab-item cur">个人贷款</li>
        </ul>
        <div id="tabContent" class="tab_content">
              <div class="tab-item-w">              
                <div class="inputText-box mt-10 ">
                    <div class="dd-ipt-div1 tr">贷款种类：</div>
                    <div class="dd-ipt-div2 border-all">
                         <select class="selectStyle">
                                 <option>请选择</option>
                                <option>个人小额抵押贷款</option>
                                <option>个人住房贷款</option>
                                <option>个人旅游贷款</option>
                                <option>个人综合消费贷款</option>
                                <option>个人短期信用贷款</option>
                                <option>助学贷款</option>
                               
                        </select>
                    </div>
                    <div class="dd-ipt-div1"><span class="pl-10"></span></div>
                </div>
                 <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">贷款总额：</div>
                    <div class="dd-ipt-div2 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">万元</span></div>
                </div>
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">按揭年数：</div>
                    <div class="dd-ipt-div2 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">年</span></div>
                </div>
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">贷款利率：</div>
                    <div class="dd-ipt-div2 ">
                    <div class="type-lx-box">
                         <p class="now">等额本息</p>
                         <p>等金本息</p>
                    </div>
                    </div>
                    <div class="dd-ipt-div1"><span class="pl-10"></span></div>
                </div>
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">贷款利率：</div>
                    <div class="dd-ipt-div2 border-all">
                        <select class="selectStyle">
                                 <option>请选择</option>
                                <option>14-11-22基准利率 1.2倍</option>
                                <option>12-07-06基准利率 1.15倍</option>
                                <option>12-06-08基准利率1.1倍</option>
                                <option>14-11-22基准利率 1.2倍</option>
                                <option>14-11-22基准利率 1.2倍</option>
                                <option>14-11-22基准利率 1.2倍</option>
                                <option>14-11-22基准利率 1.2倍</option>
                        </select>
                    </div>
                    <div class="dd-ipt-div1"><span class="pl-10">%</span></div>
                </div>
                <div class="ui-btn-box ">
                    <span class="float-l start-btn">开始计算</span>
                    <span class="float-r reset-btn">重置</span>
                </div>
              </div>
              <div class="tab-item-w mt-20">  
                 <h4>计算结果</h4>            
                <div class="inputText-box mt-10 ">
                    <div class="dd-ipt-div1 tr">月均还款：</div>
                    <div class="dd-ipt-div2 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>
                 <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">支付利息：</div>
                    <div class="dd-ipt-div2 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>  
                 <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">还款总额：</div>
                    <div class="dd-ipt-div2 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>                
            </div>
        </div>
    </div>

</section>


<!--footer-->
<footer class="public-footer">
    <p>版权所有广州融策投资顾问有限公司 </p>
    <p>©2012-2015 &nbsp;&nbsp;&nbsp;&nbsp;粤ICP备13050490号</p>
</footer>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/plugin.jquery.js"></script>
<script src="js/swiper.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/privateAll.js"></script>
<script type="text/javascript">
// $('#tab').myTab({parent:'#tabContent',index : 0});

$(function(){
    $(".type-lx-box p").on('click',function(){
        $(this).addClass('now').siblings().removeClass('now');
    })
})
</script>
</body>
</html>